<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select v-model="formInline.level1" placeholder="请选择" @change="handeler1" :disabled="show">
          <el-option
            :label="category.name"
            :value="category.id"
            v-for="category in category1List"
            :key="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="formInline.level2" placeholder="请选择" @change="handeler2" :disabled="show">
          <el-option
            :label="category.name"
            :value="category.id"
            v-for="category in category2List"
            :key="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="formInline.level3" placeholder="请选择" @change="handeler3" :disabled="show">
          <el-option
            :label="category.name"
            :value="category.id"
            v-for="category in category3List"
            :key="category.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CategorySelect',
  props:['show'],
  data() {
    return {
      formInline: {
        level1: '',
        level2: '',
        level3: '',
      },
      category1List: [],
      category2List: [],
      category3List: [],
    };
  },
  mounted() {
    this.reqCategory1List();
  },
  methods: {
    // 获取一级分类列表
    async reqCategory1List() {
      // 发送请求
      let result = await this.$API.attr.reqCategory1List();
      if (result.code === 200) {
        this.category1List = result.data;
      }
    },
    // 获取二级分类列表
    reqCategory2List() {},
    // 获取三级分类列表
    reqCategory3List() {},
    async handeler1() {
      // 清空二级分类和三级分类
      this.formInline.level2 = '';
      this.formInline.level3 = '';
      this.category2List = [];
      this.category3List = [];

      const { level1 } = this.formInline;
      // 发送自定义事件查询内容
      this.$emit('getCategoryId', { categoryId: level1, level: 1 });
      // 发送请求获取二级分类列表
      let result = await this.$API.attr.reqCategory2List(level1);
      if (result.code === 200) {
        this.category2List = result.data;
      }
    },
    async handeler2() {
      // 清空三级分类
      this.formInline.level3 = '';
      this.category3List = [];

      const { level2 } = this.formInline;
      // 发送自定义事件查询内容
      this.$emit('getCategoryId', { categoryId: level2, level: 2 });
      // 发送请求获取三级分类列表
      let result = await this.$API.attr.reqCategory3List(level2);
      if (result.code === 200) {
        this.category3List = result.data;
      }
    },
    handeler3() {
      const { level3 } = this.formInline;
      
      // 发送自定义事件查询内容
      this.$emit('getCategoryId', { categoryId: level3, level: 3 });
    },
  },
};
</script>

<style scoped></style>
